<template>
  <div>
    <dv-border-box-1
      :style="{ height: vheight }"
      v-if="bordermodel === 1"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-1>
    <dv-border-box-2
      :style="{ height: vheight }"
      v-else-if="bordermodel === 2"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-2>
    <dv-border-box-3
      :style="{ height: vheight }"
      v-else-if="bordermodel === 3"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-3>
    <dv-border-box-4
      :style="{ height: vheight }"
      v-else-if="bordermodel === 4"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-4>
    <dv-border-box-5
      :style="{ height: vheight }"
      v-else-if="bordermodel === 5"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-5>
    <dv-border-box-6
      :style="{ height: vheight }"
      v-else-if="bordermodel === 6"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-6>
    <dv-border-box-7
      :style="{ height: vheight }"
      v-else-if="bordermodel === 7"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-7>
    <dv-border-box-8
      :style="{ height: vheight }"
      v-else-if="bordermodel === 8"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-8>
    <dv-border-box-9
      :style="{ height: vheight }"
      v-else-if="bordermodel === 9"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-9>
    <dv-border-box-10
      :style="{ height: vheight }"
      v-else-if="bordermodel === 10"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-10>
    <dv-border-box-11
      :style="{ height: vheight }"
      v-else-if="bordermodel === 11"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-11>
    <dv-border-box-12
      :style="{ height: vheight }"
      v-else-if="bordermodel === 12"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-12>
    <dv-border-box-13
      :style="{ height: vheight }"
      v-else-if="bordermodel === 13"
      ref="refborderbox"
    >
      <div class="bg-color-black">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </dv-border-box-13>
    <div v-else :style="{ height: height }">
      <div class="bg-color-black" style="height: calc(100% - 10px)">
        <div class="d-flex  pl-2" v-if="title !== undefined && title !== ''">
          <span class="iconchart" :style="{ color: iconcolor }"
            ><i :class="iconclass"></i
          ></span>
          <div class="d-flex">
            <span class="title" :style="{ color: titlecolor }">{{
              title
            }}</span>
            <decorationitem
              :classname="'decoration'"
              :decorationmodel="decorationmodel"
            />
          </div>
        </div>
        <slot />
      </div>
    </div>
  </div>
</template>
<script>
import decorationitem from './decoration.vue'
export default {
  name: 'borderbox',
  props: [
    'height',
    'bordermodel',
    'title',
    'iconclass',
    'iconcolor',
    'titlecolor',
    'decorationmodel'
  ],
  data() {
    return {
      vheight: '250px'
    }
  },
  created() {
    this.vheight =
      this.height === undefined || this.height === '' ? '250px' : this.height
  },
  watch: {
    height(val) {
      this.vheight = val
      this.$nextTick(() => {
        if (
          this.$refs.refborderbox !== undefined &&
          this.$refs.refborderbox.autoResizeMixinInit !== undefined
        ) {
          this.$refs.refborderbox.autoResizeMixinInit()
        }
      })
    }
  },
  components: { decorationitem }
}
</script>

<style>
.chart-title {
  color: white;
  padding-left: 15px;
  padding-top: 5px;
}
.chart-title i {
  color: rgb(92, 217, 232);
}
.dv-border-box-4 .border-box-content {
  padding-left: 25px;
  padding-top: 25px;
}
.dv-border-box-4 .chartbox {
  background-color: rgba(19, 25, 47, 0.6);
  border-radius: 45px;
}
.dv-border-box-1 .border-box-content,
.dv-border-box-2 .border-box-content,
.dv-border-box-3 .border-box-content,
.dv-border-box-6 .border-box-content,
.dv-border-box-7 .border-box-content,
.dv-border-box-8 .border-box-content,
.dv-border-box-9 .border-box-content,
.dv-border-box-10 .border-box-content,
.dv-border-box-11 .border-box-content,
.dv-border-box-12 .border-box-content,
.dv-border-box-13 .border-box-content {
  padding: 15px;
}
.dv-border-box-1 .chartbox,
.dv-border-box-2 .chartbox,
.dv-border-box-3 .chartbox,
.dv-border-box-5 .chartbox,
.dv-border-box-6 .chartbox,
.dv-border-box-7 .chartbox,
.dv-border-box-8 .chartbox,
.dv-border-box-9 .chartbox,
.dv-border-box-10 .chartbox,
.dv-border-box-11 .chartbox,
.dv-border-box-12 .chartbox,
.dv-border-box-13 .chartbox {
  background-color: rgba(19, 25, 47, 0.6);
  border-radius: 25px;
}
.dv-border-box-5 .border-box-content {
  padding-top: 23px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}
.dv-border-box-5 .chartbox {
  background-color: rgba(19, 25, 47, 0.6);
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 135px;
}
</style>
<style scoped>
.bg-color-black {
  background-color: rgba(19, 25, 47, 0.6);
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.d-flex {
  display: flex;
  float: left;
  padding-left: 5px;
}
.pl-2 {
  margin-left: 10px;
  margin-top: 5px;
}
.d-flex .title {
  color: white;
}
.d-flex .decoration {
  width: 100px;
  height: 25px;
  position: relative;
  top: -0.0375rem;
}
.iconchart {
  color: rgb(92, 217, 232);
  float: left;
}
</style>
